/**
 * 默认加载ui（三个圆形元素依次变亮变暗）
 */
const DefaultLoadingUI = document.createElement('div');
DefaultLoadingUI.id = 'default-loading-container';
DefaultLoadingUI.style.position = 'fixed';
DefaultLoadingUI.style.right = '0';
DefaultLoadingUI.style.left = '0';
DefaultLoadingUI.style.top = '0';
DefaultLoadingUI.style.bottom = '0';
DefaultLoadingUI.style.display = 'flex';
DefaultLoadingUI.style.justifyContent = 'center';
DefaultLoadingUI.style.alignItems = 'center';
DefaultLoadingUI.style.backgroundColor = 'black';
DefaultLoadingUI.innerHTML = `
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="20">
        <circle cx="10" cy="10" r="10" fill-opacity="1" fill="rgb(255,255,255)">
            <animate attributeType="xml" attributeName="fill-opacity" values="1;0.67;0.34;0.01;0.34;0.67;1" begin="0s" dur="2s" repeatCount="indefinite"/>
        </circle>
        <circle cx="32" cy="10" r="10" fill="rgb(255,255,255)" fill-opacity="0.1">
            <animate attributeType="xml" attributeName="fill-opacity" values="0.67;1;0.67;0.34;0.01;0.34;0.67" begin="0s" dur="2s" repeatCount="indefinite"/>
        </circle>
        <circle cx="54" cy="10" r="10" fill="rgb(255,255,255)" fill-opacity="0.1">
            <animate attributeType="xml" attributeName="fill-opacity" values="0.34;0.67;1;0.67;0.34;0.01;0.34" begin="0s" dur="2s" repeatCount="indefinite"/>
        </circle>
    </svg>;
`;

export { DefaultLoadingUI };
